/* eslint-disable no-unused-vars */
import React, { useEffect, useState } from "react";
import styles from './conditioninputhorizontal.module.css'
import icon_input_delete from "@/assets/icon_input_delete.webp"


/** 条件输入框-横向 */
export default function ConditionInputHorizontal({ label, hint, value, onChange }) {

    // const [value, setValue] = useState("");

    useEffect(() => {

        return () => {
        }
    }, [])

    const onHandleInputBlur = (e) => {
        let newValue = e.target.value || "";
        // setValue(newValue);
        onChange && onChange(newValue);
    }

    const onHandleInputChange = (e) => {
        let newValue = e.target.value || "";
        // setValue(newValue);

        onChange && onChange(newValue);
    }

    const onHandleInputClear = () => {
        // setValue("");
        let newValue = "";
        onChange && onChange(newValue);
    }

    return (
        <div className={styles.conditionInputRoot}>
            {/* 标题 */}
            <div className={styles.conditionInputLabel}>{label}</div>
            {/* 冒号 */}
            <div className={styles.conditionInputColon}>:</div>
            {/* 输入框 */}
            <input className={styles.conditionInputContent}
                placeholder={hint}
                type="text"
                value={value}
                onBlur={(e) => { onHandleInputBlur(e) }}
                onChange={(e) => { onHandleInputChange(e) }}
                autoComplete="off" />
            {/* 删除 */}
            {value && value.length > 0 && <div className={styles.conditionInputDeleteContent} onClick={() => { onHandleInputClear() }}>
                <img className={styles.conditionInputDeleteIcon} alt="" src={icon_input_delete} />
            </div>}

        </div>
    )
}